<!--周建威-->
<!--2017/11/27-->
<template>
    <section>
        <!--搜索start-->
        <el-row>
            <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
                <el-form :inline="true" :model="filters" ref="searchForm">
                    <el-form-item label="操作人">
                        <el-input v-model="filters.admin_id" placeholder="操作人"></el-input>
                    </el-form-item>
                    <el-form-item label="操作详情">
                        <el-input v-model="filters.action_description"></el-input>
                    </el-form-item>
                    <el-form-item label="操作时间">
                        <el-date-picker
                                v-model="filters.startDate"
                                align="right"
                                type="date"
                                placeholder="选择日期"
                                :picker-options="pickerOptions"
                                value-format="yyyy-MM-dd"
                        >
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="-">
                        <el-date-picker
                                v-model="filters.endDate"
                                align="right"
                                type="date"
                                placeholder="选择日期"
                                :picker-options="pickerOptions"
                                value-format="yyyy-MM-dd"
                        >
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" v-on:click="handleList" icon="el-icon-search">查询</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="default" v-on:click="handleRestFilters" icon="el-icon-refresh">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
        <!--搜索end-->

        <!--表格start -->
        <el-row>
            <el-col>
                <el-table :data="logs" :highlight-current-row="true" v-loading="visible.listLoading"
                          style="width: 100%;">
                    <el-table-column type="index" width="100">
                    </el-table-column>
                    <el-table-column prop="admin.admin_name" label="操作人">
                    </el-table-column>
                    <el-table-column prop="action_description" label="操作说明" sortable="custom">
                    </el-table-column>
                    <el-table-column prop="action_ip" label="ip地址" sortable="custom">
                    </el-table-column>
                    <el-table-column prop="action_time" label="操作时间" sortable="custom">
                    </el-table-column>
                </el-table>
                <!--分页start -->
                <el-col :span="24" class="toolbar">
                    <el-pagination layout="total, sizes, prev, pager ,next" :page-size="filters.pageSize"
                                   :total="pagination.total"
                                   @current-change="handlePageChange" @size-change="handleSizeChange">
                    </el-pagination>
                </el-col>
                <!--分页end -->
            </el-col>
        </el-row>
        <!--表格end -->
    </section>
</template>
<script>
  import {getActionLogList} from '../../api/api'

  export default {
    data () {
      return {
        pickerOptions: {
          disabledDate (time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick (picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick (picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick (picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        logs: [],
        filters: {
          admin_id: '',
          action_description: '',
          pageSize: 10,
          page: 1,
          expand: 'admin',
          startDate: '',
          endDate: ''
        },
        visible: {
          listLoading: false
        },
        pagination: {
          total: 0
        }
      }
    },
    methods: {
      // 重置列表
      handleRestFilters () {
        this.filters = {
          admin_id: '',
          action_description: '',
          pageSize: 10,
          page: 1,
          expand: 'admin',
          startDate: '',
          endDate: ''
        };
        this.handleList();
      },
      // 获取列表
      handleList () {
        this.visible.listLoading = true;
        getActionLogList(this.filters).then(res => {
          this.logs = res.data;
          this.pagination.total = parseInt(res.totalCount);
          this.visible.listLoading = false;
        })
      },
      // 分页页码改变
      handlePageChange (page) {
        this.filters.page = page;
        this.handleList();
      },
      // 分页条数改变
      handleSizeChange (size) {
        this.filters.pageSize = size;
        this.handleList();
      }
    },
    mounted () {
      this.handleList();
    }
  }
</script>
<style>

</style>